<template>
  <div class="details">
    <div class="list" v-for="(item, index) in 4" :key="index">
      <div class="headline">
        {{
          index == 0
            ? "下单信息"
            : index == 1
              ? commonObj.applyType == 1
                ? "退货商品信息"
                : commonObj.applyType == 2
                  ? "换货商品信息"
                  : ""
              : index == 2
                ? commonObj.applyType == 1
                  ? "退货及时间信息"
                  : "换货及时间信息"
                : index == 3
                  ? "售后信息"
                  : ""
        }}
      </div>

      <div class="parallel" v-if="index == 0">
        <div class="array" v-for="(v, j) in commonObj.applyType == 1 ? 2 : commonObj.applyType == 2 ? 3 : ''" :key="j">
          <div class="title">
            {{
              j == 0
                ? "订单号"
                : j == 1
                  ? "售后单号"
                  : j == 2
                    ? "售后进度"
                    : j == 3
                      ? ""
                      : j == 4
                        ? ""
                        : ""
            }}：
          </div>

          <div class="title" v-if="j != 2">
            {{
              j == 0
                ? commonObj.orderNo
                : j == 1
                  ? commonObj.orderReturnNo
                  : j == 2
                    ? ""
                    : j == 3
                      ? ""
                      : j == 4
                        ? ""
                        : ""
            }}
          </div>

          <div class="title" v-if="j == 2">
            <div v-if="commonObj.applyType == 1">
              <el-tag v-if="commonObj.refundStatus == -1">未申请</el-tag>
              <el-tag v-if="commonObj.refundStatus == 0">已申请</el-tag>
              <el-tag v-if="commonObj.refundStatus == 1">待填写取件地址</el-tag>
              <el-tag v-if="commonObj.refundStatus == 2">待收货</el-tag>
              <el-tag v-if="commonObj.refundStatus == 3">待退款</el-tag>
              <el-tag v-if="commonObj.refundStatus == 4">已退款</el-tag>
              <el-tag v-if="commonObj.refundStatus == 5">已拒绝</el-tag>
            </div>

            <div v-if="commonObj.applyType == 2">
              <el-tag v-if="commonObj.exchangeStaus == -1">未申请</el-tag>
              <el-tag v-if="commonObj.exchangeStaus == 0">已申请</el-tag>
              <el-tag v-if="commonObj.exchangeStaus == 1">待填写取件地址</el-tag>
              <el-tag v-if="commonObj.exchangeStaus == 2">待收货</el-tag>
              <el-tag v-if="commonObj.exchangeStaus == 3">待换货</el-tag>
              <el-tag v-if="commonObj.exchangeStaus == 4">已换货</el-tag>
              <el-tag v-if="commonObj.exchangeStaus == 5">已签收</el-tag>
              <el-tag v-if="commonObj.exchangeStaus == 6">已拒绝</el-tag>
            </div>

          </div>
        </div>
      </div>

      <div class="commodity" v-if="index == 1">
        <div class="block">
          <div class="surface" v-for="(v, j) in 1" :key="j">
            <div class="left">
              <img :src="commonObj.goodStockImage" alt="">
            </div>
            <div class="right">
              <div class="title">
                商品名称：{{ commonObj.goodName }}
              </div>
              <div class="stock">规格：{{ commonObj.goodStockProperty }}</div>
              <div class="stock">数量：{{ commonObj.returnNum }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="delivery" v-if="index == 2 && commonObj.applyType == 1">
        <div class="parallels">
          <div class="title">售后进度：      <div v-if="commonObj.applyType == 1">
              <el-tag v-if="commonObj.refundStatus == -1">未申请</el-tag>
              <el-tag v-if="commonObj.refundStatus == 0">已申请</el-tag>
              <el-tag v-if="commonObj.refundStatus == 1">待填写取件地址</el-tag>
              <el-tag v-if="commonObj.refundStatus == 2">待收货</el-tag>
              <el-tag v-if="commonObj.refundStatus == 3">待退款</el-tag>
              <el-tag v-if="commonObj.refundStatus == 4">已退款</el-tag>
              <el-tag v-if="commonObj.refundStatus == 5">已拒绝</el-tag>
            </div>

            <div v-if="commonObj.applyType == 2">
              <el-tag v-if="commonObj.exchangeStaus == -1">未申请</el-tag>
              <el-tag v-if="commonObj.exchangeStaus == 0">已申请</el-tag>
              <el-tag v-if="commonObj.exchangeStaus == 1">待填写取件地址</el-tag>
              <el-tag v-if="commonObj.exchangeStaus == 2">待收货</el-tag>
              <el-tag v-if="commonObj.exchangeStaus == 3">待换货</el-tag>
              <el-tag v-if="commonObj.exchangeStaus == 4">已换货</el-tag>
              <el-tag v-if="commonObj.exchangeStaus == 5">已签收</el-tag>
              <el-tag v-if="commonObj.exchangeStaus == 6">已拒绝</el-tag>
            </div></div>
          <div class="title">退款金额：{{ commonObj.realityRefundPrice }}</div>
          <div class="title">备注：{{ commonObj.orderReturnBreak }}</div>
        </div>
        <div class="lint"></div>
        <div class="parallels">
          <div class="title">创建时间：{{ commonObj.createTime }}</div>
          <div class="title">审核时间：{{ commonObj.updateTime }}</div>
        </div>
      </div>

      
      <div class="delivery" v-if="index == 2 && commonObj.applyType == 2">
        <div class="array">用户退换货快递信息</div>
        <div class="parallels">
          <div class="title">快递公司：{{ commonObj.backlogisticsName }}</div>
          <div class="title">快递单号：{{ commonObj.backlogisticsNo }}</div>
        </div>
        <div class="lint"></div>
        <div class="parallels">
          <div class="title">创建时间：{{ commonObj.createTime }}</div>
          <div class="title">用户寄出时间：{{ commonObj.collectParcelStartTime }}</div>
          <div class="title">确认收货时间：{{ commonObj.afterTime }}</div>
          <div class="title">平台发货时间：{{ commonObj.updateTime }}</div>
          <div class="title">用户确认时间：{{ commonObj.collectParcelEndTime }}</div>
        </div>
      </div>


      <div class="delivery" v-if="index == 3">
        <div class="array">售后原因：{{ commonObj.reason == 'MASS' ? '质量问题' : commonObj.reason == 'SERVICE' ?
          '服务问题' : commonObj.reason == 'COURIER' ? '配送问题' : '' }}</div>
        <div class="array">
          补充描述：{{ commonObj.break }}
        </div>
        <div class="array">
          上传凭证：

          <img v-for="(item, index) in imageList" :key="index" :src="item" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  orderAfterList
} from '@/api/order'

export default {
  data() {
    return {
      id: '',
      detailsObj: {},
      soucre: null,
      //------
      page: 1,
      limit: 10,
      tableData: [],
      tableDataTotal: 0,
      addRoaid: 0,
      loading: false,
      commonObj: {},
      //----------
      imageList: []
    };
  },
  created() {
    this.id = this.$route.query.id
    this.orderAfterListMet()
  },
  methods: {
    orderAfterListMet() {
      let params = {
        keyWord: this.id,
        pageSize: this.limit,
        pageNo: this.page,
      }

      orderAfterList(params).then(res => {
        if (res.errorCode == null) {
          res.resultData.orderList.forEach((item, index) => {
            item.realityRefundPrice = Number(item.realityRefundPrice / 100).toFixed(2);
          });

          this.tableData = res.resultData.orderList;
          this.tableDataTotal = res.resultData.totalNum;
          this.commonObj = res.resultData.orderList[0]

          if (res.resultData.orderList[0].image != null) {
            this.imageList = res.resultData.orderList[0].image.split(';')
          }
          this.loading = false;
        }
      })
    },
  },
};
</script>

<style lang="less" scoped>
.details {
  .list {
    color: rgba(0, 0, 0, 0.7);

    .headline {
      padding: 10px;
      box-sizing: border-box;
      background: #eef5fd;
      display: flex;
      align-items: center;
      border-radius: 5px;
    }

    .parallel {
      padding: 0 10px;
      box-sizing: border-box;
      display: flex;
      height: 70px;

      .array {
        display: flex;
        align-items: center;
        width: calc(60% / 4);

        .title {
          color: rgba(0, 0, 0, 0.7);
        }

        .img {
          width: 50px;
          height: 50px;

          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
      }
    }

    .commodity {
      padding: 10px 10px 0;
      box-sizing: border-box;

      .block {
        .title {
          margin-bottom: 10px;
        }

        .surface {
          display: flex;
          align-items: center;
          margin-bottom: 10px;
          padding-bottom: 10px;
          border-bottom: 1px solid #ccc;

          .left {
            width: 120px;
            height: 80px;
            margin-right: 10px;

            img {
              width: 100%;
              height: 100%;
            }
          }

          .right {
            .title {
              margin-bottom: 10px;
            }

            .stock {
              margin-bottom: 10px;
            }

            .stock:last-child {
              margin-bottom: 0;
            }
          }
        }

        .surface:last-child {
          border-bottom: 0;
        }

        .lint {
          width: 100%;
          height: 1px;
          background: #ccc;
          margin: 10px 0;
        }
      }
    }

    .delivery {
      padding: 10px 10px 0;
      box-sizing: border-box;

      .lint {
        width: 100%;
        height: 1px;
        background: #ccc;
        margin-bottom: 10px;
      }

      .parallels {
        display: flex;
        margin-bottom: 10px;

        .title {
          display: flex;
          align-items: center;
          width: calc(80% / 4);
        }
      }

      .array {
        margin-bottom: 10px;
        display: flex;
        flex-wrap: wrap;

        img {
          width: 100px;
          height: 80px;
          margin-right: 10px;
        }
      }
    }
  }
}
</style>